import React from 'react';
import { 
	Row, Col,Divider, Button,Input, Select,Table,
    Modal,  InputNumber,notification,Popconfirm, message
 } from 'antd'; 
import axios from 'axios'
const {Option}=Select
class GoodsListManage extends React.Component{
	constructor(props){
		super(props);
		this.state={
			goodsList:[],//商品列表数据
			selectType:'id',//搜索类别
			searchContent:'',//搜索内容
			priceRender:false,//渲染价格单元格为input框
			stockRender:false,//渲染库存单元格为input框
			priceContent:'',//修改价格内容
			stockContent:'',//修改库存内容
			priceUpdateKey:'',//修改的价格的行
		}
	}
	getGoodsList=()=>{
		axios({
			method:'get',
			url:'http://123.57.67.148:3000/mock/231/mk/getGoodsList'
		}).then(res=>{
			
			res.data=res.data.map((item,index)=>{
				item.key=index
				item.id=index
				return item
			})
			console.log(res.data)
			this.setState({
				goodsList:res.data
			})
		})
	}
	componentWillMount=()=>{
		console.log('componentWillMount组件将被挂载')
	}
	componentDidMount=()=>{
		console.log('componentDidMountdom挂载完毕')
		this.getGoodsList()
	}
	componentWillUnMount=()=>{
	}
	changeSelectHander=(value)=>{//搜索类别选项修改
		console.log(value)
		this.setState({
			selectType:value
		})
	}
	changeSearchContentHander=(e)=>{//修改搜索内容
		this.setState({
			searchContent:e.target.value
		})
	}
	searchIt=()=>{//点击搜索
		//搜索数据的类别与搜索内容相等
		let arr=this.state.goodsList.filter(item=>{
			return item[this.state.selectType]==this.state.searchContent
		})
		this.setState({
			goodsList:arr
		})
	}
	resetIt=()=>{
		//搜索类别默认id，搜索内容清空，重新请求数据列表
		this.setState((state, props) => ({
		  selectType: "id",
		  searchContent:''
		}));
		this.getGoodsList()
	}
	editHander(rowInfo,e){//点击修改
		console.log(e)
		console.log(rowInfo)
		this.setState({
			priceRender:true,
			stockRender:true,
			priceUpdateKey:rowInfo.key,
			priceContent:rowInfo.price,
			stockContent:rowInfo.stock
		})
	}
	cancelEditHander(rowInfo,e){//取消修改
		this.setState({
			priceRender:false,
			stockRender:false
		})
	}
	editOkHander(rowInfo,e){//确定修改
		console.log(this.state.priceContent)
		console.log(this.state.stockContent)
		axios({
			method:'put',
			url:'http://123.57.67.148:3000/mock/231/mk/updateGoods',
			data:{
				price:this.state.priceContent,
				stock:this.state.stockContent,
				id:rowInfo.id
			}
		}).then(res=>{
			console.log(res)
			let type;
			if (res.data.tips=='修改成功') type='success'
			else type='warning'
			this.openNotificationWithIcon(type,res.data.tips)
		    this.getGoodsList()
		})
		this.setState({
			priceRender:false,
			stockRender:false
		})
	}
	changePriceContentHander=(value)=>{//改变显示修改的价格
		console.log(value)
		this.setState({
			priceContent:value
		})
	}
	changeStockContenthander=(value)=>{//改变显示修改的库存
		console.log(value)
		this.setState({
			stockContent:value
		})
	}
	openNotificationWithIcon = (type,content) => {//修改提示
	  notification[type]({
	    message: '提示',
	    description:content,
	    duration: 2,
	  });
	};
	confirmDel(id,e) {//确定删除
	  console.log(id);
	  	axios({
			method:'delete',
			url:'http://123.57.67.148:3000/mock/231/mk/delGoods',
			data:{id:id}
		}).then(res=>{
			console.log(res)
			if (res.data.tips=='删除成功') message.success(res.data.tips);
			else message.error(res.data.tips);
			this.getGoodsList()
		})
	}
	cancelDel(e) {//取消删除
	  console.log(e);
	  message.error('已取消删除');
	}
	render(){
		const columns = [
			{
				title: '商品编号',
				dataIndex: 'id',
				key: 'id'
			},
			{
				title: '商品图',
				dataIndex: 'img',
				key: 'img',
				render:(img)=>(<img src={img} style={{width:'35px',height:'35px'}} alt=""/>)
			},
			{
				title: '名称',
				dataIndex: 'name',
				key: 'name'
			},
			{
				title: '价格',
				key: 'price',
				dataIndex: 'price',
				render:(price,record)=>(
					this.state.priceRender&&record.key==this.state.priceUpdateKey
					?<InputNumber 
						value={this.state.priceContent}  
						onChange={this.changePriceContentHander}>
					</InputNumber>:
					<span>{price}</span>)
			},
			,
			{
				title: '库存',
				key: 'stock',
				dataIndex: 'stock',
				render:(stock,record)=>(
					this.state.priceRender&&record.key==this.state.priceUpdateKey
					?<InputNumber 
						value={this.state.stockContent} 
						onChange={this.changeStockContenthander}
						formatter={value=>parseInt(value)}>
					</InputNumber>
					:<span>{stock}</span>)
			}
			,
			{
				title: '类型',
				key: 'type',
				dataIndex: 'type'
			},
			{
				title: '操作',
				key: 'action',
				render: (text, record) => (
					<span style={{display:'flex'}}>
						{
							this.state.priceRender?
							<span  style={{display:'flex'}}>
							    <Button type="dashed" size="small" onClick={this.editOkHander.bind(this,text)}>确定</Button>
							    <Button type="dashed" size="small" onClick={this.cancelEditHander.bind(this,text)}>取消</Button>
							</span>
							:<Button type="dashed" size="small" onClick={this.editHander.bind(this,text)}>编辑</Button>
						}
						 <Popconfirm
						    title="是否删除该数据?"
						    onConfirm={this.confirmDel.bind(this,record.id)}
						    onCancel={this.cancelDel}
						    okText="确定"
						    cancelText="取消" >
						    <Button type="dashed" size="small" danger>删除</Button>
						  </Popconfirm>
					</span>
					)
			}
		];
		return(
			<div>
				<Row>
				      <Col flex={1}>
				         <div style={{ marginBottom: 16 }}>
					      <Input 
					      addonBefore={
						      	<Select value={this.state.selectType} className="select-before" onSelect={this.changeSelectHander}>
								    <Option value="id">商品ID</Option>
								    <Option value="name">商品名称</Option>
								    <Option value="state">商品状态</Option>
								    <Option value="type/">商品类别</Option>
								 </Select>
						      } 
					      addonAfter={
					      	  <div>
						      	<Button type="primary" onClick={this.searchIt}>搜索</Button>
						      	<Button type="primary" danger onClick={this.resetIt}>重置</Button>
						      </div>} 
					      onChange={this.changeSearchContentHander} 
					      value={this.state.searchContent} 
					      placeholder="输入搜索内容......" 
					      allowClear='true'/>
					    </div>
				      </Col>
			    </Row>
			     <Divider orientation="left" style={{ color: 'blue', fontWeight: 'normal' }}>
			      商品列表 
			    </Divider>
				 <Row>
				    <Col flex={1}>
				      <Table 
				        columns={columns} 
				        dataSource={this.state.goodsList} 
				        pagination={{ 
				        	position: ['bottomCenter'],
				        	defaultPageSize:4,
				        	total:this.state.goodsList.length
				        	 }}
				       />
				    </Col>
			  </Row>
			</div>
		)
	}
}
export default GoodsListManage;